<template>
  <div class="modifyPhone-container">
    <img class="modifyPhone-bg" :src="bgs.bg1" alt="">
    <label class="label-phone">手机号</label>
    <label class="label-code">验证码</label>

    <div :class="[{active: focs[0]}, 'phone']">{{phone}}</div>
    <div :class="[{active: focs[1]}, 'code']">{{code}}</div>

    <span :class="[{active: focs[3]}, 'btn-code']">{{checkMsg}}</span>

    <div
      class="btn-commit"
      :class="{active1: focs[2]}"
    >
      确定
    </div>
    <VMsg :msgValue="msg"></VMsg>
  </div>
</template>

<script>
  import mixinCommon from '@/assets/js/mixin-common'
  import utils from '@/assets/js/utils'

  export default {
    name: "modifyPhone",
    mixins: [mixinCommon],
    props: {
      pageGroup: {
        type: Number,
        default: 103
      },
      isPopup: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        bgs: {
          bg1: require('@/assets/images/personal/info/modifyPhoneBg.png')
        },
        phone: '请输入新的手机号码',
        code: '请输入验证码',
        checkMsg: "获取验证码",
        checkTime: null,
        focs: [false, false, false, false,],
        msg: {},
      }
    },
    methods: {
      ...utils,
      whenBack() {
        if (this.hs.focObj.group === this.pageGroup) {
          if (this.hs.focObj.objindex === 0 && this.phone.length > 0) {
            if (this.phone.indexOf('输入') !== -1) {
              this.$emit("close", {name: this.$options.name})
              return
            }
            this.phone = this.phone.substring(
              0,
              this.phone.length - 1
            );
          } else if (this.hs.focObj.objindex === 1 && this.code.length > 0) {
            if (this.code.indexOf('输入') !== -1) {
              this.$emit("close", {name: this.$options.name})
              return
            }
            this.code = this.code.substring(
              0,
              this.code.length - 1
            );
          } else {
            this.$emit("close", {name: this.$options.name})
          }
        }
      },
      getCheckCode() {
        // 判断下手机号是不是11位
        if (!this.checkMobile(this.phone)) {
          this.msg = {msg: '请输入正确的手机号码!'};
          return
        }
        if (!this.checkTime) {
          this.hs.ajax.get(
            "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/student/bind-code" +
            "?username=" + this.$store.getters.user.username +
            '&phone=' + this.phone,
            data => {
              data = JSON.parse(data);
              //console.log(data);
              if (data.head.code !== 1) {
                this.msg = {msg: data.head.desc};
                return;
              }
            },
            0,
            function (msg) {
            },
            3000
          );
          this.checkMsg = 60;
          this.hs.initFocus(this.pageGroup + "-1");
          this.checkTime = setInterval(() => {
            this.checkMsg--;
            if (this.checkMsg < 0) {
              clearInterval(this.checkTime);
              this.checkTime = null
              this.checkMsg = "获取验证码";
            }
          }, 1000);
        }
      },
      setPhone(value) {
        this.phone = value
      },
      setCode(value) {
        this.code = value
      },
      bindNewPhone() {
        if (this.checkMobile(this.phone) && this.code.length >= 4) {
          this.hs.ajax.get(
            "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/student/bind-check" +
            "?username=" + this.$store.getters.user.username +
            '&code=' + this.code +
            '&password=' + this.$store.getters.user.password,
            data => {
              data = JSON.parse(data);
              //console.log(data);
              if (data.head.code !== 1) {
                this.msg = {msg: data.head.desc};
                return;
              }
              this.msg = {msg: '绑定成功!'};
              setTimeout(() => {
                this.$emit("close", {name: this.$options.name});
              }, 1500)
            },
            0,
            function (msg) {
            },
            3000
          );
        } else {
          this.msg = {
            msg: '请输入正确的手机号和验证码'
          }
        }
      }
    },
    created() {
      this.$once('hook:beforeDestroy', () => {
        if (this.checkTime) clearInterval(this.checkTime);
      })

      new fObject(this.pageGroup, 0, null, null, this.pageGroup + '-1', null, this.pageGroup + '-3')
      new fObject(this.pageGroup, 1, null, this.pageGroup + '-0', this.pageGroup + '-2', null, this.pageGroup + '-3')
      new fObject(this.pageGroup, 2, null, this.pageGroup + '-1', null, null, null)

      new fObject(this.pageGroup, 3, null, null, null, this.pageGroup + '-1', null)
      this.hs.fObjCommit()

      this.hs.addFocus([this.pageGroup], (group, objid, objindex) => {
        console.log(group + '-' + objindex)
        // 语音处理
        if (objindex === 0) {
          this.bridge.listenerDridge.subscribe('action.voice', this.setPhone)
        } else if (objindex === 1) {
          this.bridge.listenerDridge.subscribe('action.voice', this.setCode)
        }
        this.$set(this.focs, objindex, true)
      })

      this.hs.addBlur([this.pageGroup], (group, objid, objindex) => {
        objindex === 0 ? this.bridge.listenerDridge.off('action.voice', this.setPhone) : this.bridge.listenerDridge.off('action.voice', this.setCode)
        this.$set(this.focs, objindex, false)
      })

      this.hs.addSelect([this.pageGroup], (group, objid, objindex) => {
        if (objindex === 2) { // 换绑
          this.bindNewPhone()
        } else if (objindex === 3) {  // 验证码
          if (this.checkMobile(this.phone)) {
            this.getCheckCode()
          } else {
            this.msg = {
              msg: '请输入正确的手机号'
            }
          }
        }
      })

      this.hs.addEvenToList(this.hs.defaultNumberCode, (keycode) => {
        if (this.hs.focObj.group === this.pageGroup) {
          if (this.hs.focObj.objindex === 0) {
            if (this.phone.indexOf('输入') !== -1) this.phone = ''
            this.phone += keycode.toString();
          } else if (this.hs.focObj.objindex === 1) {
            if (this.code.indexOf('输入') !== -1) this.code = ''
            this.code += keycode.toString();
          }
        }
      });
    },
    mounted() {
      this.hs.initFocus(this.pageGroup + '-0')
    },
    beforeDestroy(){
      this.hs.areaLastFocus[103] = null
    }
  }
</script>

<style scoped lang="less">

  .modifyPhone-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;

    .modifyPhone-bg {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
    }

    .label-phone, .label-code {
      position: absolute;
      left: 520px;
      top: 430px;
      width: 156px;
      height: 34px;
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0px;
      color: #bdedff;
    }

    .label-code {
      top: 561px;
    }

    .phone, .code {
      position: absolute;
      left: 672px;
      top: 406px;
      width: 465px;
      height: 80px;
      background-color: #74c1e5;
      border-radius: 8px;
      font-size: 36px;
      line-height: 80px;
      color: #104572;
      opacity: 0.6;
      text-indent: 2em;
      border: 2px solid transparent;
    }

    .code {
      top: 541px;
    }

    .btn-code {
      position: absolute;
      left: 1161px;
      top: 416px;
      width: 250px;
      height: 64px;
      line-height: 64px;
      margin-left: 24px;
      font-size: 35px;
      border-radius: 10px;
      text-align: center;
      color: #000;
      background-color: #53cfff;
      border: 2px solid transparent;
    }

    .btn-commit {
      position: absolute;
      left: 796px;
      top: 675px;
      width: 398px;
      height: 121px;
      background-image: linear-gradient(#53ceff, #6ec6e8);
      border-radius: 80px;
      line-height: 121px;
      font-size: 55px;
      text-align: center;
      border: 2px solid transparent;
      overflow: hidden;
      z-index: 99;
    }

    .active {
      border: 2px solid #fff;
    }

    .active1 {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      border: 2px solid #fff;
      background: #0e60e9;
      color: #fff;
    }
  }

</style>
